<template>
  <div class="pie_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
/*
传参格式：
写出来的都是必传
可以自己加参数会追加
    legendStyle = {// 图例样式
      show: true,
      icon: "rect",
      left: 0,
      top: 0,
      itemWidth: 0,
      itemHeight: 0,
      itemGap: 0,
    };
    gridConfig = {// 网格样式
    };
     seriesStyle:{//series数据样式
        radius: [15, 50],
        center: ['25%', '55%'],
    },
    seriesData:[//series数据
        [
        { value: 26, name: '实物配租' },
        { value: 5, name: '共有产权房' },
        { value: 20, name: '租金补贴' },
        { value: 5, name: '其他' },
        ]
    ]
*/
import { inject, ref, shallowRef, onMounted, onUnmounted, watch, toRaw, watchEffect, defineEmits } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => { },
  },
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogPieData'])
// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let gridStyle = props.housingSupplyStatsData.gridStyle//网格
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置

const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    // 图例配置
    const legendConfig = {
      show: legendStyle.show,
      icon: legendStyle.icon,
      // orient:legendStyle.orient,
      left: pxToRem(legendStyle.left) ? pxToRem(legendStyle.left) : legendStyle.left,
      right: pxToRem(legendStyle.right),
      top: typeof legendStyle.top == "number" ? pxToRem(legendStyle.top) : legendStyle.top,
      bottom: pxToRem(legendStyle.bottom),
      itemWidth: pxToRem(legendStyle.itemWidth),
      itemHeight: pxToRem(legendStyle.itemHeight),
      itemGap: pxToRem(legendStyle.itemGap),
      textStyle: {
        color: "#fff",
        fontSize: pxToRem(12),
        rich: {
          one: {
            width: pxToRem(100),
          },
          two: {
            width: pxToRem(50),
          },
          three: {
            width: pxToRem(50),
          }
        },
        padding: [0, 0, pxToRem(-3), 0],
      },
    };
    // 追加项
    for (let j in legendStyle) {
      if (j != 'show' && j != 'icon' && j != 'left' && j != 'right' && j != 'top' && j != 'itemWidth' && j != 'itemHeight' && j != 'itemGap' && j != ' textStyle') {
        legendConfig[j] = toRaw(legendStyle[j])
      }
    }
    // series配置
    let seriesConfig = seriesData.map((item, index) => {
      return {
        name: '',
        type: 'pie',
        center: toRaw(seriesStyle.center),
        radius: [pxToRem(toRaw(seriesStyle.radius)[0]), pxToRem(toRaw(seriesStyle.radius)[1])],
        itemStyle: {
          borderRadius: pxToRem(2),
          backgroundColor: 'red'
        },
        data: toRaw(seriesData[index]).map((item, index) => {
          return {
            name: item.name,
            value: item.value1,
            value1: item.value2,
          }
        })
      }
    })
    // 追加项
    for (let i in seriesStyle) {
      if (i != 'radius' && i != 'center' && i != ' type' && i != ' seriesData') {
        seriesConfig[0][i] = toRaw(seriesStyle[i])
      }
    }
    //绘图
    const option = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          return (
            `${params.name}面积：` + `${params.value}万㎡<br/>占比：${params.percent}%</br> ` + tempDom(params)
          )
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        position: function (point, params, dom, rect, size) {
          return [point[0], '5%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(14),
        },
        backgroundColor: "rgba(47, 99, 205, 0.5)",
        borderColor: '#66FFFF', // 设置边框颜色为红色
        borderWidth: 1, // 设置边框宽度
      },
      legend: legendConfig,
      series: seriesConfig
    }
    myChart.value.setOption(option);
    myChart.value.on("click", (params) => {
      emit('dialogPieData', props.housingSupplyStatsData)
    });
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  legendStyle = props.housingSupplyStatsData.legendStyle//图例
  gridStyle = props.housingSupplyStatsData.gridStyle//网格
  seriesData = props.housingSupplyStatsData.seriesData//serires数据
  seriesStyle = props.housingSupplyStatsData.seriesStyle//serires配置 
  getEchart();
};

const tempDom = (params) => {
  let tempDom = ''
  let tb = params.data.value1 >= 0 ? 'up' : 'down'
  if (tb == 'up') {
    tempDom = `<span class="triangle"></span><span class="greenFont">${params.data.value1}%</span>同比上年`
  } else {
    tempDom = `<span class="triangleRed"></span><span class="redFont">${params.data.value1}%</span>同比上年`
  }

  return tempDom
}


watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart(); // 创建新的图表实例
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
    }
  });
});
</script>

<style scoped lang="less">
.pie_box {
  width: 100%;
  height: 100%;
}

.echarts-background {
  background-color: transparent !important;
}

:deep(.triangle) {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #2ecc71;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
}

:deep(.triangleRed) {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid red;
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  margin-bottom: 2px;
  transform: rotateX(180deg);
}

:deep(.greenFont) {
  color: #2ecc71;
}

:deep(.redFont) {
  color: red;
}
</style>
